﻿using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace SA2012TBRace
{
	class HtmlOutput
	{
		public static string GetHtmlHeaderInfo()
		{
			var sb = new StringBuilder();
			sb.Append(
				@"
				<!DOCTYPE HTML>
				<html lang='en-US'>
				<head>
					<meta charset='UTF-8'>
					<title>Testing</title>
					<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
					<script type='text/javascript' src='http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js'></script>
					<script type='text/javascript' src='http://css3.bradshawenterprises.com/js/modernizr.js'></script>

					<style type='text/css'>
					h1 {
						font-weight: bold;
						font-size: 26px;
						text-shadow: white 0px 1px 0, black 0 -1px 0;
						color: #444;
						letter-spacing: -1px;
						text-transform: uppercase;
						display: block;
						margin: 15px 0 10px 0;
						line-height: 1.2em;
					}
					
					#note {
						font-size:11px;
						color:#333;
						padding:10px;
						border:1px solid #b99f35;
						background:#f4eccb;
						border-radius: 3px;
						line-height:16px;
					}
					
					body {
						background:#e7e7e7;
						font-family:arial;
					}
					
					#container {
						margin: 0 auto;
						width: 800px	
					}
					
					.thumb {
						display:block;
						width:300px;
						height:200px;
						position:relative;
						margin-bottom:20px;
						margin-right:20px;
						float:left;
					}
					
					.thumb-wrapper {
						display:block;
						width:100%;
						height:100%;
					}
					
					.thumb .thumb-front {
						display:block;
						width:100%;
						height:100%;
						position:absolute;
						background:#fff;
						font-family:arial;
						font-weight:bold;
						font-size:16px;			
					}

					.thumb .thumb-detail {
						display:block;
						width:100%;
						height:100%;
						position:absolute;
						background:#fff;
						font-family:arial;
						font-weight:bold;
						font-size:16px;			
					}
						
					.thumb .thumb-detail a {
						display:block;
						width:100%;
						height:100%;
						text-transform:uppercase;
						font-weight:bold;	
						color:#333;
						text-decoration:none;		
						font-family: 'Open Sans', sans-serif;
						letter-spacing:-1px;
						padding:10px;	
						font-size:18px;
					}		

					/*
					* Without CSS3
					*/
					.thumb.scroll {
						overflow: hidden;
					}	

					.thumb.scroll .thumb-detail {
						bottom:-280px;
					}
						
					/*
					* CSS3 Flip
					*/	
					.thumb.flip {
						-webkit-perspective:800px;		
						   -moz-perspective:800px;
							-ms-perspective:800px;		   		
							 -o-perspective:800px;
								perspective:800px;
					}
					
						.thumb.flip .thumb-wrapper {
							-webkit-transition: -webkit-transform 1s;
							   -moz-transition: -moz-transform 1s;
								-ms-transition: -moz-transform 1s;
								 -o-transition: -moz-transform 1s;
									transition: -moz-transform 1s;
							-webkit-transform-style: preserve-3d;
							   -moz-transform-style: preserve-3d;			
								-ms-transform-style: preserve-3d;			
								 -o-transform-style: preserve-3d;			
									  transform-style: preserve-3d;			
						}
						
						.thumb.flip .thumb-detail {
							-webkit-transform: rotateY(-180deg);
							   -moz-transform: rotateY(-180deg);
								-ms-transform: rotateY(-180deg);
								 -o-transform: rotateY(-180deg);
									transform: rotateY(-180deg);			   			
						}
						
						.thumb.flip img,
						.thumb.flip .thumb-detail {
							-webkit-backface-visibility: hidden;
							   -moz-backface-visibility: hidden;
								-ms-backface-visibility: hidden;
								 -o-backface-visibility: hidden;
									backface-visibility: hidden;
						}
						
						.thumb.flip .flipIt {
							-webkit-transform: rotateY(-180deg);
							   -moz-transform: rotateY(-180deg);			
								-ms-transform: rotateY(-180deg);			
								 -o-transform: rotateY(-180deg);			
									transform: rotateY(-180deg);			
						}
					
					</style>
					
					<script type='text/javascript'>
					$(function () {
					
						if ($('html').hasClass('csstransforms3d')) {	
							$('.thumb').removeClass('scroll').addClass('flip');		
							$('.thumb.flip').hover(
								function () {
									$(this).find('.thumb-wrapper').addClass('flipIt');
								},
								function () {
									$(this).find('.thumb-wrapper').removeClass('flipIt');			
								}
							);
							
						} else {
							$('.thumb').hover(
								function () {
									$(this).find('.thumb-detail').stop().animate({bottom:0}, 500, 'easeOutCubic');
								},
								function () {
									$(this).find('.thumb-detail').stop().animate({bottom: ($(this).height() * -1) }, 500, 'easeOutCubic');			
								}
							);
						}
					});
					</script>
				</head>
				<body>");
			return sb.ToString();
		}

		public static string GetHtmlFooterInfo()
		{
			var sb = new StringBuilder();
			
			sb.Append("</body>");

			return sb.ToString();
		}

		public static string GetHtmlPointesInfo(IEnumerable<Trackable> trackables)
		{
			var sb = new StringBuilder();
			sb.Append("<div id='container'>");
			foreach (var trackable in trackables)
			{
				sb.Append(String.Format(
					@"
					<div class='thumb scroll'>
						<div class='thumb-wrapper'>
							<div  class='thumb-front'>
								Code: {0}<br />
								Name: {1}<br />
								Race: {2}<br />
								Points: {3}
							</div>
							<div class='thumb-detail'>
								Cache Points: {4}<br />
								CITO Points: {5}<br />
								Mega Points: {6}<br />
								Total Points: {7}<br />
							</div>
						</div>
					</div>",
					trackable.Code,
					trackable.Name,
					trackable.RaceType,
					trackable.TotalPoints,

					trackable.CacheVisitedPoints,
					trackable.CitosVisistedPoints,
					trackable.MegasVisitedPoints,
					trackable.TotalPoints));
			}

			return sb.ToString();
		}
	}
}
